<template>
  <div>
    <el-dialog width="60%" title="选择商品" :visible.sync="show" append-to-body closed="closeDialog" @open="openDialog">
      <el-form :inline="true" :model="goodsPamars">
        <el-form-item label="商品名称">
          <el-input v-model="goodsPamars.title" :maxlength="20" placeholder="商品名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getGoodsList()">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="shopTab" :data="goodsList" border v-loading="tableLoading" style="width: 100%;">
        <el-table-column align="center" type="index" label="序号" width="80"> </el-table-column>
        <el-table-column prop="cover" header-align="center" align="center" label="商品图片">
          <template slot-scope="{row}">
            <el-popover placement="left" title trigger="hover">
              <img :src="row.cover" style="height: 200px;margin-right: 10px;">
              <img slot="reference" :src="row.cover" @click="$openImg(row.cover)" style="height: 50px;width: 50px;margin-right: 10px;">
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="title" header-align="center" align="center" label="商品名称">
        </el-table-column>
        <el-table-column prop="price" header-align="center" align="center" label="商品价格（元）">
          <template slot-scope="scope">
            <span>{{ scope.row.min_sale_price == scope.row.max_sale_price ? scope.row.min_sale_price : scope.row.min_sale_price + '~' + scope.row.max_sale_price }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="title" header-align="center" align="center" label="是否是积分商品">
          <template slot-scope="{row}">
            <el-tag v-if="row.point_goods">是</el-tag>
            <el-tag type="danger" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="title" header-align="center" align="center" label="是否免费" v-if="false">
          <template slot-scope="{row}">
            <el-tag v-if="row.free">是</el-tag>
            <el-tag type="danger" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="area_feature" header-align="center" align="center" label="所在分区">
          <template slot-scope="{row}">
            <span v-if="row.area_feature === 0">服务体系礼包</span>
            <span v-if="row.area_feature === 1">新人福利区</span>
            <span v-if="row.area_feature === 2">公益申领区</span>
            <span v-if="row.area_feature === null">未分配</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" width="150" label="操作">
          <template slot-scope="{row}">
            <el-button v-if="row.area_feature === null" type="text" size="small" @click="selectGoods(row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBox">
        <el-pagination @size-change="sizeChangeShop" @current-change="currentChangeShop" :current-page="goodsPamars.page" :page-sizes="[10, 20, 50, 100]"
          :page-size="goodsPamars.limit" :total="total" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeSelGoods">取 消</el-button>
      </span>

      <el-dialog width="25%" title="设置" :visible.sync="innerVisible" append-to-body center>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="顺序">
            <el-input-number v-model="form.order_index" :min="1" :max="99999" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item label="服务礼包区域" v-if="areaFeature == 0">
            <el-select v-model="form.service_package_area" placeholder="请选择">
              <el-option v-for="item in service_package_areaArr" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm" :loading="btnLoading">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import workpolicyApi from '@/api/workpolicyApi.js'
import serviceApione from '@/api/serviceApione.js'
export default {
  data () {
    return {
      total: 0,
      goodsPamars: {
        page: 1,
        limit: 10,
        verify_status: 1,
      },
      goodsList: [],
      tableLoading: false,
      innerVisible: false,
      rules: {},
      form: {
        order_index: 1
      },
      btnLoading: false,
      activeItem: {},
      service_package_areaArr: [
        { label: "大区公司", value: 0 },
        { label: "省级公司", value: 1 },
        { label: "市级", value: 2 },
        { label: "服务中心", value: 3 },
        { label: "服务驿站", value: 4 },
        { label: "爱心小屋", value: 5 },
      ]
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    areaFeature: {
      type: Number,
    }

  },
  computed: {
    show: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit("update:visible", val)
      }
    }
  },
  methods: {
    getGoodsList () {
      this.tableLoading = true;
      serviceApione.getGoodsList(this.goodsPamars).then(res => {
        this.tableLoading = false;
        if (res && res.data.code == 200) {
          this.goodsList = res.data.page.list
          this.total = res.data.page.totalCount;
        }
      })
    },
    // 开启弹窗时
    openDialog () {
      this.getGoodsList();
    },
    // 关闭弹窗时
    closeDialog () {

    },
    // 确定
    confirm () {
      this.btnLoading = true;
      this.form.area_feature = this.areaFeature;
      this.form.goods_id = this.activeItem.id;
      workpolicyApi.goodsareafeatureAdd(this.form).then(res => {
        this.btnLoading = false;
        if (res && res.data.code == 200) {
          this.$message.success('设置成功！')
          this.innerVisible = false;
          this.show = false;
          this.$emit('change')
        }
      })
    },
    // 关闭弹窗
    closeSelGoods () {
      this.show = false
    },
    // 选择商品
    selectGoods (item) {
      this.activeItem = item;
      this.form.id = item.id;
      this.form.order_index = 1;
      this.innerVisible = true;
    },
    // 每页数
    sizeChangeShop (val) {
      this.goodsPamars.limit = val
      this.getGoodsList()
    },
    // 当前页
    currentChangeShop (val) {
      this.goodsPamars.page = val
      this.getGoodsList()
    },
  }
}
</script>

<style lang="scss" scoped>
.pageBox {
  text-align: center;
  margin-top: 20px;
}
</style>